WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > 2D Chart Types > RenderableSeries APIs - Animation API > Standard Animation Types
Standard Animation Types

In this section we are going to take a closer look at each of the animation types provided out-of-the-box, which can be applied to our WPF Charts. We are going to use the Band Series example as a base to compare show specifics of every one of these.

Examples for the WPF Chart Animations can be found in the SciChart WPF Examples Suite which can be downloaded from the SciChart Website or our SciChart.WPF.Examples Github Repository.

Sweep Animation

SweepAnimation animates the series point by point until it reaches its full length:

Set SweepAnimation in XAML

SweepAnimation markup
Copy Code 
 <s:SciChartSurface.RenderableSeries>
                 <s:FastBandRenderableSeries Fill="#33279B27"
                                            FillY1="#33FF1919"
                                            Stroke="#FFFF1919"
                                            StrokeY1="#FF279B27">
                    <s:FastBandRenderableSeries.SeriesAnimation>
                        <s:SweepAnimation Duration="00:00:05">
                            <s:SweepAnimation.EasingFunction>
                                <CircleEase EasingMode="EaseIn" />
                            </s:SweepAnimation.EasingFunction>
                        </s:SweepAnimation>
                    </s:FastBandRenderableSeries.SeriesAnimation>
                 </s:FastBandRenderableSeries>
</s:SciChartSurface.RenderableSeries>

Wave Animation

WaveAnimation animates the top of a series until it reaches its original level in a wave-like manner:

Set WaveAnimation in XAML

WaveAnimation Markup
Copy Code 
<s:SciChartSurface.RenderableSeries>
    <s:FastBandRenderableSeries Fill="#33279B27"
                                FillY1="#33FF1919"
                                Stroke="#FFFF1919"
                                StrokeY1="#FF279B27">
        <s:FastBandRenderableSeries.SeriesAnimation>
            <s:WaveAnimation Duration="00:00:02"
                                      PointDurationFraction="0.5"
                                      ZeroLine="-0.7" />
        </s:FastBandRenderableSeries.SeriesAnimation>
    </s:FastBandRenderableSeries>
</s:SciChartSurface.RenderableSeries>

The ZeroLine property specifies a value on an YAxis, which indicates the level from which points that are being animated emerge.

The PointDurationFraction property indicates how long it takes to animate every point in the series in relation to the full animation Duration.

The default value is 0.5, which means that if full animation would take 4 seconds, it would take 2 seconds to animate a single point to its original level.

Scale Animation

ScaleAnimation changes the extent of a series until it reaches its full. Unlike the Wave animation, it animates both top and bottom of a RenderableSeries:

Set ScaleAnimation in XAML

ScaleAnimation Markup
Copy Code 
<s:SciChartSurface.RenderableSeries>
     <s:FastBandRenderableSeries x:Name="BandSeries"
                                 Fill="#33279B27"
                                 FillY1="#33FF1919"
                                 Stroke="#FFFF1919"
                                 StrokeY1="#FF279B27">
         <s:FastBandRenderableSeries.SeriesAnimation>
             <s:ScaleAnimation Duration="00:00:04" ZeroLine="-0.5">
                 <s:ScaleAnimation.EasingFunction>
                    <ElasticEase EasingMode="EaseOut" />
                 </s:ScaleAnimation.EasingFunction>
             </s:ScaleAnimation>
         </s:FastBandRenderableSeries.SeriesAnimation>
     </s:FastBandRenderableSeries>
</s:SciChartSurface.RenderableSeries>
Here the ZeroLine property means the same as in case of Wave animation. It indicates the level from which points that are being animated emerge.

Fade Animation

FadeAnimation animates the Opacity of a RenderableSeries:

Set FadeAnimation in XAML

FadeAnimation markup
Copy Code 
<s:FastBandRenderableSeries Fill="#33279B27"
                            FillY1="#33FF1919"
                            Stroke="#FFFF1919"
                            StrokeY1="#FF279B27">
    <s:FastBandRenderableSeries.SeriesAnimation>
        <s:FadeAnimation>
            <s:FadeAnimation.EasingFunction>
                <CircleEase EasingMode="EaseIn" />
            </s:FadeAnimation.EasingFunction>
        </s:FadeAnimation>
    </s:FastBandRenderableSeries.SeriesAnimation>
</s:FastBandRenderableSeries>

See Also
Introduction to the Animations API